<template>
  <div class="question-banks-tree">
    <!-- <div class="banks-header">
      <i class="el-icon-s-platform"></i>
      <span>题型综合库</span>
      <el-select v-model="reposValue" placeholder="请选择" style="width: 100%" @change="onReady">
        <el-option v-for="item in questionReposList" :key="item.reposId" :label="item.reposName" :value="item.reposId"> </el-option>
      </el-select>
    </div> -->
    <div class="banks-body">
      <!-- <div class="option-item">
        <el-select v-model="courseValue" placeholder="请选择" style="width: 100%" @change="loadQuestionOption">
          <el-option v-for="item in courseOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div> -->
      <div v-if="showQuestionMode" class="option-item">
        <el-radio-group v-model="questionMode" style="width: 100%" size="small" @change="changeQuestionMode">
          <el-radio-button label="knowledge">知识点选题</el-radio-button>
          <el-radio-button label="chapter">章节选题</el-radio-button>
        </el-radio-group>
      </div>

      <div v-if="!showQuestionMode" class="banks-header">
        <i class="el-icon-s-platform"></i>
        <span>知识点</span>
      </div>

      <el-link type="primary" icon="el-icon-folder-checked" v-if="showSelectAll" @click="selectAll">全选</el-link>

      <div class="option-item">
        <el-tree
          ref="questionTree"
          class="question-tree"
          node-key="id"
          :expand-on-click-node="false"
          :highlight-current="true"
          :data="questionData"
          :props="questionProps"
          :default-expanded-keys="defaultExpandedKeys"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
    </div>
  </div>
</template>
<script>
import { listJuanQuestionRepos } from "@/api/juan/juanQuestionRepos";
import { getCourseByMajorId } from "@/api/system/juanCourse";
import { getChapterTreeByQuestion, getKnowledgeTreeByQuestion, getKnowledgeTreeByQuestion1, getQuestionListNew } from "@/api/juan/juanQuestion";
export default {
  props: {
    pagerReposId: {
      type: String,
      default: null,
    },
    defaultQuestionMode: {
      type: String,
      default: "knowledge", // 'chapter' or 'knowledge'
    },
    showQuestionMode: {
      type: Boolean,
      default: true,
    },
    showSelectAll: {
      type: Boolean,
      default: false,
    },
    paperData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      questionReposList: [],
      reposValue: null, // 题库
      courseValue: null,
      courseOptions: [],
      questionData: [],
      questionProps: {
        label: "nodeName",
      },
      defaultExpandedKeys: [],
      questionMode: this.defaultQuestionMode,
    };
  },
  watch: {
    pagerReposId: {
      handler(val) {
        if (val) {
          this.reposValue = val;
          this.courseValue = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    //this.loadQuestionRepos();
    //this.loadFacultyOption();
    this.loadQuestionOption();
  },
  methods: {
    loadQuestionRepos() {
      listJuanQuestionRepos({
        pageNum: 1,
        pageSize: 10000,
      }).then((res) => {
        this.questionReposList = res.rows;
        if (res.rows.length > 0) {
          this.reposValue = res.rows[0].reposId;
        }
        this.onReady();
      });
    },
    loadFacultyOption() {
      this.courseOptions = [];
      this.courseValue = null;
      getCourseByMajorId()
        .then((res) => {
          this.courseOptions = res.data.map((item) => ({
            ...item,
            value: item.courseId,
            label: item.courseSubject,
          }));

          if (this.courseOptions.length > 0) {
            this.courseValue = this.courseOptions[0].courseId;
            this.loadQuestionOption();
          }
        })
        .catch();
    },
    loadQuestionOption() {
      this.questionData = [];
      if (!this.courseValue) {
        return;
      }

      let getTreeByQuestion = this.questionMode === "knowledge" ? getKnowledgeTreeByQuestion1 : getChapterTreeByQuestion;

      getTreeByQuestion({
        courseId: this.courseValue,
      })
        .then((res) => {
          this.questionData = res.data;
          this.$nextTick(() => {
            if (res.data && res.data.length > 0) {
              this.$refs.questionTree.setCurrentKey(res.data[0].id); // 默认选中节点第一个
            }
          });

          this.defaultExpandedKeys = res.data.map((item) => {
            return item.id;
          });
          this.onReady();
        })
        .catch();
    },
    handleNodeClick(data) {
      this.$emit("tree-node-click", data);
      this.onReady();
    },
    changeQuestionMode() {
      this.knowledgeId = null;
      this.chapterId = null;
      this.loadQuestionOption();
    },
    onReady() {
      if (!this.reposValue) {
        return;
      }
      let options = {
        reposId: this.reposValue,
        courseId: this.courseValue,
        mode: this.questionMode,
      };

      const currentKey = this.$refs.questionTree.getCurrentKey();
      const optionId = currentKey ? currentKey : this.questionData[0].id;
      if (this.questionMode === "knowledge") {
        options.knowledgeId = optionId;
      } else if (this.questionMode === "chapter") {
        options.chapterId = optionId;
      }

      this.$emit("on-ready", options);
    },
    selectAll() {
      this.questionData.forEach(item => {
        this.$emit("tree-node-click", item);
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.question-banks-tree {
  // width: 300px;
  display: flex;
  flex-direction: column;

  .banks-header {
    flex-shrink: 0;
    border-radius: 8px;
    height: 83px;
    display: flex;
    align-items: center;
    background: url("~@/assets/images/question-banks-bg.png") no-repeat right bottom #fff;
    padding: 0 20px;
    font-size: 20px;
    color: #363b55;
    font-weight: bold;
    i {
      font-size: 18px;
      color: #1890ff;
      margin-right: 8px;
    }
  }

  .banks-body {
    flex: 1;
    border-radius: 8px;
    background-color: #fff;
    margin-top: 2px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;

    .option-item {
      margin-top: 12px;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}
.question-tree {
  ::v-deep {
    &.el-tree-node.is-current > .el-tree-node__content {
      background-color: #1890ff;
      color: #fff;
    }
  }
}
</style>
